<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="${ctsCss}/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctsJs}/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctsJs}/Util.js"></script>
<script type="text/javascript" src="${ctsJs}/report-explain.js"></script>
<script type="text/javascript" src="${ctsJs}/ColorPicker/jquery.colorpicker.js"></script>
<script type="text/javascript" src="${ctsJs}/layer/layer.min.js"></script>
<link href="${ctsCss}/library/assets/css/bootstrap.css" rel="stylesheet" />
<link href="${ctsJs}/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="${ctsJs}/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="${ctsJs}/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctsJs}/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${ctsJs}/ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="${ctsJs}/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript" src="${ctsJs}/ztree/js/jquery.ztree.exedit-3.5.min.js"></script>
<link rel="stylesheet" href="${ctsJs}/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
<script src="${ctsJs}/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctsJs}/common.js"></script>

<style type="text/css"> 
/* .btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  *background-color: #0044cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #a2a2a2;
    border-image: none;
    border-radius: 0;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 1px 10px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
} */
body{ padding:5px; margin:0; padding-bottom:15px;}
        #layout1{  width:100%;margin:0; padding:0;  }
        .l-page-top{ height:40px; background:#ffffff; margin-bottom:3px;}
        h4{ margin:20px;}
</style>
<script type="text/javascript">

	var ctx = "${ctx}";
	
	
</script>
<script language="javascript" for="DCellWeb" event="MenuStart(c, r, s)">
	DCellWeb.MenuStart(c, r, s)
</script>
<script language="javascript" for="DCellWeb" event="MenuCommand(c,r,itemId)">
	DCellWeb.MenuCommand(c, r, itemId)
</script>
</head>
<body style="padding:10px">
<input type="hidden" id="id" name="id" value="${id}"/>
<input type="hidden" id="annualId" value="${annualId}"/>

<!-- 列 -->
<input type="hidden" id="absStartColValueHidden" name="absStartColValueHiddenName" value="${absStartCol}"/>
<input type="hidden" id="absEndColValueHidden" name="absEndColValueHiddenName" value="${absEndCol}"/>
<!-- 行 -->
<input type="hidden" id="absStartRowValueHidden" name="absStartRowValueHiddenName" value="${absStartRow}"/>
<input type="hidden" id="absEndRowValueHidden" name="absEndRowValueHiddenName" value="${absEndRow}"/>
	
<div id="rig_tag">
		<ul>
			<li class="pop-up_tag_a" id="pop-up_tag_a" onclick="jspShowTab('pop-up_tag_a');">报表说明模板设计</li>
          	<div id="pop-up_tag_a_div">
			   	<li id="pop-up_tag_tab">
			   		<div id="layout1" style="height: 98%;">
			   			<div position="center" title="工具栏">
			   				<div>
							    <ul id="lef_cen">
							      <li id="lef_tool">
							      	<ul id="gjl">
										<li><a id="saveReportTemplate" href="#" title="保存"></a></li>
										<li><a id="fontStyleCu" href="#" title="加粗"></a></li>
										<li><a id="fontStyleXie" href="#" title="加斜"></a></li>
							   			<li><a id="fontStyleXia" href="#" title="下划线"></a></li>
							   			<li><a id="rowCellLeft" href="#" title="居左"></a></li>
										<li><a id="rowCellCenter" href="#" title="居中"></a></li>
										<li><a id="rowCellRight" href="#" title="居右"></a></li>
										<li><a id="rowCellVerticalLevelCenter" href="#" title="垂直居中"></a></li>
										<li><a id="rowCellVerticalLevelLeft" href="#" title="垂直居左"></a></li>
										<li><a id="rowCellVerticalLevelRight" href="#" title="垂直居右"></a></li>
										<li><a id="rowCellDispersedAlignment" href="#" title="分散对齐"></a></li>
										<li><a id="insertCellCol" href="#" title="增加列"></a></li>
										<li><a id="insertCellRow" href="#" title="增加行"></a></li>
										<li><a id="deleteCellCol" href="#" title="删除列"></a></li>
										<li><a id="deleteCellRow" href="#" title="删除行"></a></li>
										<li><a id="mergeCell" href="#" title="合并单元格"></a></li>
										<li><a id="unMergeCell" href="#" title="拆分单元格"></a></li>
						      			<li><font style="vertical-align:middle;">边框选择：</font>
									      	<select id="selectBorder" style="vertical-align:middle;width:100px">
												<option value="1">无线</option>
												<option value="2" selected>细线</option>
												<option value="3">中线</option>
												<option value="4">粗线</option>
												<option value="5">划线</option>
												<option value="6">点线</option>
												<option value="7">点划线</option>
												<option value="8">点点划线</option>
												<option value="9">粗划线</option>
												<option value="10">粗点线</option>
												<option value="11">粗点划线</option>
												<option value="12">粗点点划线</option>
											</select>
										</li>
						      			<li><a id="leftCellBorder" href="#" title="左边框"></a></li>
										<li><a id="rightCellBorder" href="#" title="右边框"></a></li>
										<li><a id="topCellBorder" href="#" title="上边框"></a></li>
										<li><a id="downCellBorder" href="#" title="下边框"></a></li>
										<li><a id="allCellBorder" href="#" title="全网格"></a></li>
										<li><a id="allCellBorderNull" href="#" title="无网格"></a></li>
										<li style="break:break-all"></li>
										<li><font style="vertical-align:middle;">字体：</font>
											<select id="selectFont" style="vertical-align:baseline;width:85px">
												<option value="微软雅黑">微软雅黑</option>
												<option value="隶书">隶书</option>
												<option value="宋体">宋体</option>
												<option value="黑体">黑体</option>
												<option value="楷体">楷体</option>
												<option value="仿宋">仿宋</option>
											</select></li>
											<li><font style="vertical-align:middle;"></font>
												<select id="selectFontSize" style="vertical-align:baseline;width:45px">
													<option value="6">6</option>
													<option value="8">8</option>
													<option value="9">9</option>
													<option value="10">10</option>
													<option value="11">11</option>
													<option value="12">12</option>
													<option value="14">14</option>
													<option value="16">16</option>
													<option value="18">18</option>
													<option value="20">20</option>
													<option value="22">22</option>
													<option value="24">24</option>
													<option value="26">26</option>
													<option value="28">28</option>
													<option value="30">30</option>
													<option value="32">32</option>
													<option value="34">34</option>
													<option value="36">36</option>
													<option value="48">48</option>
													<option value="72">72</option>
												</select></li>
												<li><a id="chooseTextColor" href="#" title="字体颜色"></a></li>
												<li><a id="exportExcel" href="#" title="导出EXCLE"></a></li>
												<li><a id="importExcel" href="#" title="导入EXCLE"></a></li>
										</ul>
									</li>
								</ul>
							</div>
			   			</div>
			   			<div position="centerbottom" title="报表区域" >
			   				<div>
					      			<object id="DCellWeb" style="left: 0px; width: 100%; top: 0px; height: 445px;z-index=-1" codebase="CellWeb5.cab"
							              classid="clsid:3F166327-8030-4881-8BD2-EA25350E574A" >
							               <param name="_Version" value="65536" />
							               <param name="_ExtentX" value="10266" />
							               <param name="_ExtentY" value="7011" />
							               <param name="_StockProps" value="0" />
									</object>
							</div>
					    </div>
						<div position="right" title="区域设置" style="OVERFLOW-Y: auto; OVERFLOW-X:hidden;height:100%;">
							<span  id="rig_text_header"> 区域设置：</span><br />
						      		<table class="rig_table" width="99%" border="1" cellspacing="0" cellpadding="0">
						      			<tr id="areaColTr">
								            <td class="td_grey" width="40%" rowspan="2">设置报表区域:</td>
								            <td class="td_grey2" width="60%" style="padding:7px 0px 0px 10px;">
								            	列：<input type="text" style="width:30px" id="startCol" name="startCol"></input>&nbsp;至&nbsp;<input type="text" style="width:30px" id="endCol" name="endCol"></input>
								            </td>
								        </tr>
								        <tr id="areaRowTr">
								            <td class="td_grey2" width="70%" style="padding:7px 0px 0px 10px;">
								            	行：<input type="text" style="width:30px" id="startRow" name="startRow"></input>&nbsp;至&nbsp;<input style="width:30px" type="text" id="endRow" name="endRow"></input>
								            </td>
								        </tr>
								        <tr>
								            <td class="td_grey" width="100%" colspan="2" align="right">
								            	<table class="rig_table1" width="99%" border="0" cellspacing="0" cellpadding="0">
								            		<tr>
								            			<td class="td_grey" width="100%" colspan="1" align="right">
								            				<input type="button" value="设置" id="setUpReportDataArea"/>
								            			</td>
								            		</tr>
								            	</table>
								            </td>
								        </tr>
						      		</table>
						      	<span  id="rig_text_header">数据区域明细：</span><br />
						      	<table class="rig_table" width="99%" border="0" cellspacing="0" cellpadding="0" id="reportCategoryTable">
						      		<tr>
							            <td class="td_grey_header" align="center">说明</td>
							            <td class="td_grey_header" align="center">操作</td>
							        </tr>
						      	</table>
						      	<div style="height:15px"></div>
						</div>
			   		</div>
			   	</li>
			</div>
        </ul>
</div>

<script type="text/javascript">
//页面加载后，加载报表数据区域的所有单元格属性
function onloadCellType(templateId){
	$.ajax({
		url:'${ctx}/reportDesignController/queryReportAndCellType/' + templateId,
		type:'POST',
		cache:false,
		success:function(data){
			if(data != "" && data != null){
				$.each(data,function(idx,item){
					var key = item.absColNum + "--" + item.absRowNum;
					
					if(item.quoteType == null){
						var celldatatype = new Celldatatype(item.absColNum,item.absRowNum,item.relColNum,item.relRowNum,item.cellType,"",item.isComment,item.areaType);
					}else{
						var celldatatype = new Celldatatype(item.absColNum,item.absRowNum,item.relColNum,item.relRowNum,item.cellType,item.quoteType,item.isComment,item.areaType);
					}
					
					cellAttributeMap.put(key,celldatatype);
				});
			}
			//为了判断cellAttributeMap是否是从数据库读出来的，所以这里赋值，如果是读出来的，在设置报表区域的时候就去做new的操作，否则不做new的操作
			//isDatabaseOnload = true;
		}
	});
}

//页面加载后，加载该张报表的数据区域
function onloadReportAreaTemporary(templateId){
	$.ajax({
		url:'${ctx}/reportDesignController/queryReportAreaTemporary/' + templateId,
		type:'POST',
		cache:false,
		success:function(data){
			if(data != "" && data != null){
				$.each(data,function(idx,item){
					var key = item.id;
					
					var reportCategory = new ReportCategory(item.categoryId,item.categoryName,item.condStartCol,item.condEndCol,item.condStartRow,item.condEndRow,item.templateId,item.absStartCol,item.absEndCol,item.absStartRow,item.absEndRow,item.temporaryDescribe);
					
					reportCategoryMap.put(key,reportCategory);
					
					var tableTr = handleReportCategory(key,item.categoryName,item.temporaryDescribe);
					$("#reportCategoryTable").append(tableTr);
				});
			}
		}
	});
}

$(document).ready(function(){//初始化
	$("#layout1").ligerLayout({ rightWidth: 270, centerBottomHeight:475});
	var explainId = $("#id").val();
	var annualId = $("#annualId").val();
	
	DCellWeb.OpenFile(ctx+"/reportTemplateExplainController/readReportTemplateExplain/"+explainId+"/"+annualId,"");
	DCellWeb.AllowDragdrop="false"; 
	onloadCellExplainType(explainId);
	onloadReportAreaTemporary(explainId);
});

//页面加载后，加载报表数据区域的所有单元格属性
function onloadCellExplainType(explainId){
	$.ajax({
		url:'${ctx}/reportTemplateExplainController/queryReportAndCellExplain/' + explainId,
		type:'POST',
		cache:false,
		success:function(data){
			if(data != "" && data != null){
				$.each(data,function(idx,item){
					var key = item.absColNum + "--" + item.absRowNum;
					
					var celldatatype = new Celldatatype(item.absColNum,item.absRowNum);
					
					cellAttributeMap.put(key,celldatatype);
				});
			}
			//为了判断cellAttributeMap是否是从数据库读出来的，所以这里赋值，如果是读出来的，在设置报表区域的时候就去做new的操作，否则不做new的操作
			//isDatabaseOnload = true;
		}
	});
}

//页面加载后，加载该张报表的数据区域
function onloadReportAreaTemporary(explainId){
	$.ajax({
		url:'${ctx}/reportTemplateExplainController/queryReportExplainAreaTemporary/' + explainId,
		type:'POST',
		cache:false,
		success:function(data){
			if(data != "" && data != null){
				$.each(data,function(idx,item){
					var key = item.id;
					var reportCategory = new ReportCategory(item.absStartCol,item.absEndCol,item.absStartRow,item.absEndRow,item.explainId,item.temporaryDescribe);
					reportCategoryMap.put(key,reportCategory);
					var tableTr = handleReportCategory(key,item.temporaryDescribe);
					$("#reportCategoryTable").append(tableTr);
				});
			}
		}
	});
}
</script>
</html>